博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js 浏览器滑动页面滚动条时,获取元素距离浏览器顶部距离,并且固定浮动导航...
阅读量:7228 次
发布时间:2019-06-29

本文共 1172 字,大约阅读时间需要 3 分钟。

 浏览器滑动页面滚动条时,获取元素距离浏览器顶部距离,动态获取。

举个栗子:

这是要循环的div,要菜单$(".mdtit") 在$(".box")距离顶部小于20px时保持浮动。

学校介绍

 

.nav_index_fix {
position: fixed; left: 0; top: 0;}

 

$(function(){        $(window).scroll(function(){            $(".box").each(function(){                //所有需要计算距离浏览器顶端高度的元素                var scrollTop = $(window).scrollTop();// 网页被卷起来的高度                var nap_top = $(this).offset().top;        //页面元素距离文档顶端高度距离                if(nap_top-scrollTop < 20){              //元素距离浏览器顶部高度                    $(".mdtit").removeClass("nav_index_fix");                          $(this).children(".mdtit").addClass("nav_index_fix");                }else{                    $(this).find(".mdtit").removeClass("nav_index_fix");                }            })        });    });

注意:声明的变量必须写在each循环里面,当滑动时才能动态获取当前元素距离顶部的距离

转载于:https://www.cnblogs.com/i6010/articles/6543067.html

你可能感兴趣的文章
MFC 使用位图按钮,并且设置按钮的鼠标悬停效果
查看>>
ceph存储之查找对象
查看>>
IE7下浮动(float)层不能实现环绕的问题
查看>>
LeetCode 【Single Number I II III】
查看>>
BOOL类型和引用,三目运算符
查看>>
rocketMq概念介绍
查看>>
Google推出iOS功能性UI测试框架EarlGrey
查看>>
busybox filesystem ts_config: No such file or directory
查看>>
Unity 3D第三人称视角、用途广泛限定角度(视角不能360度翻转)
查看>>
Spreading the Wealth uva 11300
查看>>
Eclipse 报java.lang.UnsupportedClassVersionError: ("yourclass") bad major version at offset=6
查看>>
快读快输板子
查看>>
vue中父组件给子组件额外添加参数
查看>>
分片上传
查看>>
网络编程初识和socket套接字
查看>>
什么是构造函数?它和普通函数的区别?
查看>>
mysql中key 、primary key 、unique key 与index区别
查看>>
zabbix使用企业微信发送告警信息
查看>>
zabbix4.0离线快速编译安装(编译安装方法)
查看>>
[Java开发之路](7)RandomAccessFile类详解
查看>>